<template>
  <div>
    <transition :name="transitionName">
      <div class="transitionBody">
        <router-view :key="$route.fullPath"></router-view>
        <Footer v-if="isFooter"></Footer>
      </div>
    </transition>
    <!--    <suspenPopup></suspenPopup>-->
    <tab-bar v-if="isTabbar"></tab-bar>
  </div>
</template>

<script>
import TabBar from '@/components/Tabbar/index';
import Footer from '@/components/flooter/index.vue';
import safeBottom from '@/components/saveBottom/index.vue';
import suspenPopup from '@/components/suspenPopup/index.vue';
export default {
  data() {
    return {
      isTabbar: true,
      isFooter: true,
      transitionName: 'transitionLeft',
    };
  },
  components: { TabBar, Footer, safeBottom, suspenPopup },
  methods: {
    getPath(path) {
      /^\/$|loan/.test(path)
        ? (this.isFooter = true)
        : (this.isFooter = false);
      if (/mine|^\/$|product|shop|article-detail/.test(path)) {
        this.isTabbar = true;
      } else {
        this.isTabbar = false;
      }
    },
  },
  mounted() {
    this.getPath(this.$route.path);
  },
  watch: {
    $route(to, from) {
      this.getPath(to.path);
      this.transitionName =
        to.meta.index < from.meta.index ? 'transitionLeft' : 'transitionRight';
    },
    deep: true,
    immediate: true,
  },
};
</script>

<style>
.van-sidebar-item--select::before{
  background-color:#0533ff;
}
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}
.el-avatar{
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
.ripple:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: inherit;
  top: 0;
  left: 0;
  background-color: transparent;

}

.ripple.active:after {
  background-color: rgba(0, 0, 0, 0.1);
  transition: 0s;
}
.van-haptics-feedback {
  cursor: pointer;

  &:active {
    opacity: 0.6;
  }
}
</style>
<style scoped lang="scss">
.transitionBody {
  transition: all 0.4s ease-out;
  overflow: hidden;
}

.transitionLeft-enter,
.transitionRight-leave-active {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

.transitionLeft-leave-active,
.transitionRight-enter {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}

.transitionLeft-enter-active,
.transitionRight-enter-active {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
</style>
